<template>
  <div class="user-center-container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <div class="user-info-card">
        <div class="red-bg"></div>
        <div class="avatar-wrapper">
          <a-avatar :size="80" :src="userInfo.userAvatar" class="user-avatar">
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <div class="user-name">{{ userInfo.userName }}</div>
          <div class="user-role">
            <tag-outlined />
            <span>{{ userRoleText }}</span>
          </div>
          <div class="join-date">
            注册时间: {{ formatDate(userInfo.createTime) }}
          </div>
        </div>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        :style="{ width: '100%' }"
        @select="handleMenuSelect"
      >
        <a-menu-item key="detail">
          <template #icon><UserOutlined /></template>
          我的信息
        </a-menu-item>
        <a-menu-item key="cart">
          <template #icon><ShoppingCartOutlined /></template>
          我的购物车
        </a-menu-item>
        <a-menu-item key="order">
          <template #icon><OrderedListOutlined /></template>
          我的订单
        </a-menu-item>
        <a-menu-item key="points">
          <template #icon><TrophyOutlined /></template>
          我的积分
        </a-menu-item>
        <a-menu-item key="address">
          <template #icon><EnvironmentOutlined /></template>
          地址管理
        </a-menu-item>
      </a-menu>
    </div>

    <!-- 右侧内容区 - 使用 router-view 显示子路由内容 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useLoginUserStore } from "@/store/userStore";
import { getLoginUserUsingGet } from "@/api/userController";
import { message } from "ant-design-vue";
import {
  UserOutlined,
  ShoppingCartOutlined,
  OrderedListOutlined,
  TagOutlined,
  TrophyOutlined,
  EnvironmentOutlined,
} from "@ant-design/icons-vue";

const router = useRouter();
const route = useRoute();
const userStore = useLoginUserStore();

// 根据当前路由路径设置选中的菜单项
const selectedKeys = ref([route.path.split("/").pop() || "detail"]);

const userInfo = reactive({
  id: userStore.loginUser.id || "",
  userName: userStore.loginUser.userName || "",
  userAvatar: userStore.loginUser.userAvatar || "",
  userProfile: userStore.loginUser.userProfile || "",
  userRole: userStore.loginUser.userRole || "",
  createTime: "",
});

// 将userRole转换为用户角色显示文本
const userRoleText = computed(() => {
  switch (userInfo.userRole) {
    case "admin":
      return "管理员";
    case "user":
      return "普通用户";
    default:
      return "普通用户";
  }
});

// 处理菜单选择
const handleMenuSelect = ({ key }: { key: string }) => {
  if (key === "detail") {
    router.push("/user");
  } else {
    router.push(`/user/${key}`);
  }
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}-${String(date.getDate()).padStart(2, "0")}`;
};

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const res = await getLoginUserUsingGet();
    // 使用类型断言解决类型问题
    const apiRes = res as any;
    if (apiRes.data && apiRes.data.code === 0 && apiRes.data.data) {
      const userData = apiRes.data.data;
      Object.assign(userInfo, userData);
    } else {
      message.error((apiRes.data && apiRes.data.message) || "获取用户信息失败");
    }
  } catch (error: any) {
    console.error("获取用户信息失败:", error);
    message.error("获取用户信息失败");
  }
};

onMounted(() => {
  fetchUserInfo();
});

// 监听路由变化更新选中的菜单项
watch(
  () => route.path,
  (path) => {
    selectedKeys.value = [path.split("/").pop() || "detail"];
  }
);
</script>

<style scoped>
.user-center-container {
  display: flex;
  min-height: 85vh;
  background: #f5f5f5;
  padding: 20px;
  gap: 20px;
  margin-top: 60px;
}

.sidebar {
  width: 250px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.user-info-card {
  position: relative;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.red-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(135deg, #8c4b3c, #a5683c);
}

.avatar-wrapper {
  position: relative;
  z-index: 1;
  padding-top: 20px;
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin: 12px 0 8px;
  color: #333;
}

.user-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a5683c;
  font-size: 14px;
  padding: 2px 8px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(165, 104, 60, 0.1);
}

.join-date {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  overflow: hidden;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .user-center-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .content {
    margin-top: 20px;
  }
}
</style>
